import { useState } from "react";

interface FiledSonProps {
  label: string;
}

function FiledSon({ label }: FiledSonProps) {
  const [text, setText] = useState("");

  return (
    <label>
      {label}：
      <input value={text} placeholder={label} onChange={e => setText(e.target.value)} />
    </label>
  );
}

function Filed() {
  const [reverse, setReverse] = useState(false);

  let checkbox = (
    <label>
      <input type="checkbox" checked={reverse} onChange={e => setReverse(e.target.checked)} />
      调换顺序
    </label>
  );

  if (reverse) {
    return (
      <>
        <FiledSon key="firstName" label="姓氏" />
        <br />
        <FiledSon key="lastName" label="名字" />
        <br />
        {checkbox}
      </>
    );
  }
  return (
    <>
      <FiledSon key="lastName" label="名字" />
      <br />
      <FiledSon key="firstName" label="姓氏" />
      <br />
      {checkbox}
    </>
  );
}

export default Filed;
